<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/banner2.css">
</head>
<body>
    <div class="list">
        <img src="img/1.jpg" alt="" class="choose">
        <img src="img/2.jpg" alt="">
        <img src="img/3.jpg" alt="">
        <img src="img/4.jpg" alt="">
        <img src="img/5.jpg" alt="">
        <div class="content"></div>
        <ul class="btns">
            <li class="choose"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <div class="prev">
            <div class="left-arrow"></div>
        </div>
        <div class="next">
            <div class="right-arrow"></div>
        </div>
    </div>
    <!-- 引入jq文件 -->
    <script src="./js/jquery-1.12.3.js"></script>
    <script>
        // 获取元素
        var $list = $(".list") 
        var $img = $(".list img");
        var $btn = $(".btns li");
        var $content = $(".content");
        var $prev = $(".prev");
        var $next = $(".next");
        var timebar;

        // 当前显示图片序号
        var imageId = 1;

        // 创建div 3行5列,div
        for (var i = 0; i < 3; i++) {
            for (var j = 0; j < 5; j++) {
                // 创建列元素
                var col = $("<div class='col' />")
                // 将列放入行内
                // row.append(col)
                $content.append(col)
            }
        }

        // 渲染第二张图片
        $content.find(".col").each(function (index) {
            // 求出行号列号，整数部分行号，余数列号
            console.log(index, parseInt(index/5), index % 5)
            // 设置背景位置
            $(this).css({
                backgroundPositionX: -(index % 5)*104,
                backgroundPositionY: -parseInt(index/5)*93,
                top:93*parseInt(index/5),
                left:104*(index%5),
            });
        });
        

        // 设置背景图片位置
        function changeImage(fn) {
            // 判断边界
            if (imageId > $img.length) {
                imageId = 1;
            } else if (imageId < 1) {
                imageId = $img.length;
            }

            $content.find(".col").css({
                backgroundImage:"url(img/" + imageId + ".jpg)",
                width:0,
                height:0,
                opacity:0,
            }).each(function () {
                // 每一个元素设置不同时间动画
                $(this).stop(true).animate({
                    width:104,
                    height:93,
                    opacity:1,
                }, 500+500*Math.random())
            })
            // 更新小圆点
            $btn.eq(imageId-1).addClass("choose").siblings().removeClass("choose");
            
            // 判断是否启动轮播
            fn&&fn();
        }

        
        // 轮播
        function startInterval() {
            timebar = setInterval(function () {
                // 页面要显示前一张图片
                $img.eq(imageId-1).addClass("choose").siblings().removeClass("choose");

                // 更改id
                imageId++;
                
                // 启动动画
                changeImage();
            },3000)
        }

        startInterval();

        // 移动到图片上显示左右按钮
        $list.mouseenter(function () {
            $prev.css({"visibility":"visible"});
            $next.css({"visibility":"visible"});
        })

        $list.mouseleave(function () {
            $prev.css({"visibility":"hidden"});
            $next.css({"visibility":"hidden"});
        })

        // 点击箭头切换左右
        // 右侧箭头
        $next.click(function () {
            // 1.清除定时器
            clearInterval(timebar);
            // 显示上一张图片
            $img.eq(imageId-1).addClass("choose").siblings().removeClass("choose");
            
            // 2.更改索引值(边界处理)
            imageId++;

            // 3.启动定时器切换动画
            changeImage(startInterval)

        });

        // 点击左侧箭头切换
        $prev.click(function () {
            // 1.清除定时器
            clearInterval(timebar);
            // 显示上一张图片
            $img.eq(imageId-1).addClass("choose").siblings().removeClass("choose");
            
            // 2.更改索引值(边界处理)
            imageId--;

            // 3.启动定时器切换动画
            changeImage(startInterval)
        })

        // 点击小圆点切换
        $btn.click(function () {
            // 1.停止动画
            clearInterval(timebar);
            
            // 显示上一张图片
            $img.eq(imageId-1).addClass("choose").siblings().removeClass("choose");
            
            // 2.更新索引
            imageId = $(this).index()+1;
            
            // 3.启动轮播
            changeImage(startInterval)
        })    
        
    </script>
</body>
</html>